import React from "react";


import {Modal, Form, message, Table, Button, Input, Select} from 'antd';
import {
    projectModuleListApi,
    addModuleApi,
    removeModuleApi,
    modifyModuleApi,
    projectMicroServiceListApi
} from "../api/projectConfig"


const confirm = Modal.confirm
const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;

class Module extends React.Component {

    completeCallBack;

    state = {
        visible: false,
        updateModuleId: false,
        moduleList: [],
        microList:[],
    }

    componentDidMount() {
        this.props.onRef(this)
        this.fetchModuleList();
    }

    showModal = (callBack) => {
        this.completeCallBack = callBack;
        const { projectDetail } = this.props;
        if(projectDetail.proType === 'micro') {
            this.fetchMicroServiceList();
        }

        this.setState({...this.state, visible: true});
    }

    handleCancel = () => {
        this.setState({...this.state, visible: false});
    }


    fetchMicroServiceList = ()=> {
        projectMicroServiceListApi(this.props.projectId).then((res)=>{
            this.setState({...this.state, microList: res.data.data});
        });
    }

    fetchModuleList = () => {
        projectModuleListApi(this.props.projectId).then((res)=>{
            this.setState({...this.state, moduleList: res.data.data});
        });
    }

    removeModule = (moduleId)=>{

        let that = this;
        confirm({
            title: '是否确定删除模块?',
            content: 'Some descriptions',
            okText: 'Yes',
            okType: 'danger',
            cancelText: 'No',
            onOk() {
                removeModuleApi(moduleId);
                message.success('删除成功！');
                that.fetchModuleList();
                that.completeCallBack('delete');
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }

    addModule = (e) => {
        e.preventDefault();

        let that = this;
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {

                let formData = that.props.form.getFieldsValue();
                formData.projectId = that.props.projectId;

                var ret = null;
                if(that.state.updateModuleId) {
                    formData.id = that.state.updateModuleId;
                    ret = modifyModuleApi(formData);
                } else {
                    ret = addModuleApi(formData);
                }

                ret.then((res)=>{
                    message.success('保存成功！');
                    that.fetchModuleList();

                    that.state.updateModuleId = false;
                    /** 清除输入框 */
                    that.props.form.setFieldsValue({name:'', showName:'', description:''});
                    that.completeCallBack('add-update');

                });
            }
        });

    }

    render() {


        let {visible, microList} = this.state
        let columns = [{
            title: '微服务',
            dataIndex: 'microName',
            width: '20%',
            key: 'microName'
        },{
            title: 'name',
            dataIndex: 'name',
            width: '20%',
            key: 'name'
        }, {
            title: 'showName',
            dataIndex: 'showName',
            width: '20%',
            key: 'showName'
        }, {
            title: 'description',
            dataIndex: 'description',
            width: '20%',
            key: 'description'
        }, {
            title: 'Operate',
            width: '20%',
            render: (text, row, index) => {
                return (<div>
                    <Button onClick={()=>{
                        this.removeModule(row.id);
                    }} type="danger" size="small">删除</Button>
                    &nbsp;
                    <Button onClick={()=>{
                        this.props.form.setFieldsValue(row);
                        this.setState({...this.state, updateModuleId: row.id});
                    }} type="danger" size="small">修改</Button>
                </div>)
            }
        }];

        const { projectDetail } = this.props;

        // 项目类型为【单项目】时，删除【微服务】项
        if(projectDetail.proType === 'simple') {
            columns = columns.splice(1, columns.length);
        }

        const data = this.state.moduleList;
        const { getFieldDecorator } = this.props.form;

        return (
            <Modal
                width={900}
                visible={visible}
                keyboard={false}
                maskClosable={false}
                title="模块管理"
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                footer={[
                    <Button key="back" onClick={this.handleCancel}>关闭</Button>
                ]}
            >

                {/* 添加/修改 确定-保存 */}
                <Form layout="inline" className="form_item_4" onSubmit={this.addModule}>

                    {projectDetail.proType === 'simple' ? '' :
                        <FormItem>
                            {getFieldDecorator('microId', {
                                rules: [{required: true, message: 'is not null!'}],
                            })(
                                <Select style={{width: '160px'}} placeholder="请选择服服务">
                                    {microList.map((vo) => <Option key={'micro_k_' + vo.id} value={vo.id}>{vo.name}</Option>)}
                                </Select>
                            )}
                        </FormItem>
                    }

                    <FormItem >
                        {getFieldDecorator('name', {
                            rules: [{ required: true, message: 'is not null!' }],
                        })(
                            <Input placeholder="英文名称" />
                        )}
                    </FormItem>

                    <FormItem >
                        {getFieldDecorator('showName', {
                            rules: [{ required: true, message: 'is not null!' }],
                        })(
                            <Input placeholder="中文名称" />
                        )}
                    </FormItem>

                    <FormItem >
                        {getFieldDecorator('description', {
                            rules: [{ required: true, message: 'is not null!' }],
                        })(
                            <TextArea placeholder="简介" />
                        )}
                    </FormItem>

                    <Button type="primary" htmlType="submit" icon="save">{this.updateModulId ? '修改' : '添加'}</Button>
                </Form>


                    {/* 列表 删除 */}

                {/* 修改 -  */}
                <Table columns={columns} rowKey={record => record.id} dataSource={data} pagination={false}/>


            </Modal>
        );
    }

}

const _Module = Form.create()(Module);

export default _Module